import { getMenuListApi } from '@/api/menu/menu'
import { RouteRecordRaw } from 'vue-router'
import { ActionContext } from 'vuex'
import { RootState } from '..'
import { MenuList } from './MenuList'
import Layout from '@/layout/Index.vue'
// 导入全部的 页面
const modules = import.meta.glob('../../view/**/*.vue')
export type MenuState = {
  count: number,
  collapse: boolean,
  menuList: any
}
export const state: MenuState = {
  count: 0,
  collapse: false,
  menuList: [
    {
      path: '/',
      component: "Layout",
      name:'dashboard',
      redirect:'/dashboard',
      meta: {
        title: "首页",
        icon: "HomeFilled"
      },
      children: [
         {
          path: '/dashboard',
          component: () => import('@/view/dashboard/Index.vue'),
          name: 'dashboardIndex',
          meta: {
            title: '首页',
            icon: 'HomeFilled'
          }
        }
      ]
    },
    {
      path: '/work',
      component: "Layout",
      name: 'work',
      meta: {
        title: "业务配置",
        icon: "HomeFilled"
      },
      children: [
        {
          path: '/01Work/01Stage/index',
          component: () => import('@/view/01Work/01Stage/index.vue'),
          name: '01Stage',
          // hidden:true,
          meta: {
            title: '阶段配置',
            icon: 'HomeFilled'
          }
        },
        {
          path: '/01Work/02TemPlate/index',
          component: () => import('@/view/01Work/02TemPlate/index.vue'),
          name: '02TemPlate',
          meta: {
            title: '模板配置',
            icon: 'HomeFilled'
          }
        },
      ]
    },
    {
      path: '/organization',
      component: "Layout",
      name: 'organization',
      meta: {
        title: "系统人员管理",
        icon: "HomeFilled"
      },
      children: [
        {
          path: '/03Organization/01User/index',
          component: () => import('@/view/03Organization/01User/index.vue'),
          name: '01User',
          meta: {
            title: '用户管理',
            icon: 'HomeFilled'
          }
        },
        {
          path: '/03Organization/02Department/index',
          component: () => import('@/view/03Organization/02Department/index.vue'),
          name: '02Department',
          meta: {
            title: '部门管理',
            icon: 'HomeFilled'
          }
        },
        {
          path: '/03Organization/03Role/index/index',
          component: () => import('@/view/03Organization/03Role/index.vue'),
          name: '03Role',
          meta: {
            title: '角色管理',
            icon: 'HomeFilled'
          }
        },
        {
          path: '/03Organization/04Menu/index',
          component: () => import('@/view/03Organization/04Menu/index.vue'),
          name: '04Menu',
          meta: {
            title: '菜单管理',
            icon: 'HomeFilled'
          }
        },
      ]
    },
  ]
}
export const mutations = {
  setCount: (state: MenuState, count: number) => {
    return state.count = count
  },
  setCollapse: (state: MenuState, collapse: boolean) => {
    return state.collapse = collapse
  },
  setMenuList: (state: MenuState, menuList: Array<RouteRecordRaw>) => {
    state.menuList = state.menuList.concat(menuList)
  }
}

export const actions = {
  // 这个地方有点儿趣 反正我以前没怎么做好 今天来补习一哈 请看好 这个router 是外界传递进来的 大哥
  getMenuList({ commit }: ActionContext<MenuState, RootState>, router: any) {
    return new Promise((resolve, reject) => {
      getMenuListApi().then((res) => {

        let accessedRoutes
        if (res.code === 200) {
          // 接下来怎么设计 就是一个遍历 传递数据 就好了
          accessedRoutes = filterAsyncRoutes(MenuList as any, router)
          commit('setMenuList', accessedRoutes)
        }
        resolve(accessedRoutes)
      }).catch((error) => {
        reject(new Error(error))
      })
    })
  }
}
export const getters = {
  getMenuList: (state: MenuState) => {
    return state.menuList
  },
  getCollapse: (state: MenuState) => {
    return state.collapse
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}
export function filterAsyncRoutes(routes: RouteRecordRaw[], router: any) {

  const res: Array<RouteRecordRaw> = [];
  routes.forEach((route: any) => {
    const tmp = { ...route }
    const component = tmp.component;
    if (route.component) {
      if (component == 'Layout') {
        tmp.component = Layout;
      } else {
        tmp.component = modules[`../../view${component}.vue`]

      }
    }
    if (tmp.children) {
      //递归
      tmp.children = filterAsyncRoutes(tmp.children, router)
    }
    router.addRoute(tmp)
    res.push(tmp)
  })
  return res;
}